<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/cssreset.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>个人简历</title>
</head>

<body>
  <div class="top-nav">
    <div class="container">
      <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
        <!-- navbar-brand给logo （规格）-->
        <a href="#" class="navbar-brand jianli font-weight-bold">个人简历</a>
        <!-- 缩小菜单，当低于某个宽度时，缩小菜单出现 ，缩小菜单在大屏时隐藏-->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#myDiv">
          <!-- 小菜单的三条小横线 -->
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 被折叠菜单 collapse 控制消失隐藏
            navbar-collapse 管对齐方式的（样式）-->
        <div class="collapse navbar-collapse" id="myDiv">
          <!-- 菜单区 -->
          <ul class="nav navbar-nav">
            <li class="nav-item">
              <a class="nav-link active w3ls-hover" href="index.html">
                <span data-letters="首&#x3000&#x3000页">首&#x3000&#x3000页</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link w3ls-hover" href="#" data-toggle="modal" data-target="#about" aria-expanded="false">
                <span data-letters="个人信息">个人信息</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link w3ls-hover" href="#" data-toggle="modal" data-target="#skill">
                <span data-letters="技能掌握">技能掌握</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link w3ls-hover" href="#" data-toggle="modal" data-target="#experience">
                <span data-letters="我的经历">我的经历</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link w3ls-hover" href="#" data-toggle="modal" data-target="#works">
                <span data-letters="我的作品">我的作品</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link w3ls-hover" href="#" data-toggle="modal" data-target="#contact">
                <span data-letters="联系我">联系我</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>

  <div class="video" data-vide-bg="img/cv">
    <div class="container">
      <div class="banner-text agileinfo-text">
        <h1>沈&#x3000彬&#x3000鹏</h1>
        <h6>Web前端工程师</h6>
      </div>
    </div>
  </div>

  <!-- 个人信息模态框 -->
  <div class="modal fade" id="about">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h2 class="modal-title text-white">个人信息</h2>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body modal-spa clearfix">
          <div class="about d-flex flex-lg-row flex-sm-column justify-content-around align-items-center">
            <div class="about-left">
              <img src="img/cv.jpg" alt="">
            </div>
            <div class="f-item text-white">
              <h3>Hi,I'm
                <span>小沈</span>
              </h3>
              <h4>Web钱端攻城狮</h4>
              <ul>
                <li>
                  <td>出生年月:</td>
                  <td>2002-05-20</td>
                </li>
                <li>
                  <td>年&#x3000&#x3000龄:</td>
                  <td>18</td>
                </li>
                <li>
                  <td>手&#x3000&#x3000机:</td>
                  <td>13888888888</td>
                </li>
                <li>
                  <td>邮&#x3000&#x3000箱:</td>
                  <td>1314520@qq.com</td>
                </li>
                <li>
                  <td>毕业院校:</td>
                  <td>云南大学旅游文化学院</td>
                </li>
                <li>
                  <td>学&#x3000&#x3000历:</td>
                  <td>本科</td>
                </li>
              </ul>
            </div>
          </div>
          <div class="present">
              <div class="text-white">
                <p>&#x3000&#x3000我就是英俊潇洒、风流倜傥、人见人爱、花见花开、人称山崩地裂水倒流鬼见愁，为了朋友可以两肋插刀，为了女人可以插朋友两刀，威震武林的美少年是也~!</p>
                <p>&#x3000&#x3000话说回来，本人逻辑思维强，思路清楚，学习能力强，对新技术有着强烈的好奇心。工作认真踏实，有较好的时间观念，且具有扎实的专业基础，有着良好的代码书写规范的码农——鹏鹏程序员！</p>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 技能掌握模态框 -->
  <div class="modal fade" id="skill">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h2 class="modal-title text-white">技能掌握</h2>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body modal-spa">
          <div class="myskill d-flex flex-lg-row flex-sm-column justify-content-around align-items-center">
            <div class="f-item text-white">
              <h3>相关技能</h3>
              <div class="pg">
                <span>JavaScript</span>
                <div class="progress">
                  <div class="rounded bg-danger progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
                </div>
              </div>
              <div class="pg">
                <span>HTML</span>
                <div class="progress">
                  <div class="rounded bg-success progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
                </div>
              </div>
              <div class="pg">
                <span>CSS</span>
                <div class="progress">
                  <div class="rounded bg-info progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
                </div>
              </div>
              <div class="pg">
                <span>Photoshop</span>
                <div class="progress">
                  <div class="rounded bg-warning progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
                </div>
              </div>
            </div>
            <div class="f-item text-white">
                <h3>相关框架</h3>
                <div class="pg">
                  <span>Vue</span>
                  <div class="progress">
                    <div class="rounded bg-danger progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
                  </div>
                </div>
                <div class="pg">
                  <span>Jquery</span>
                  <div class="progress">
                    <div class="rounded bg-success progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
                  </div>
                </div>
                <div class="pg">
                  <span>ElementUI&MintUI</span>
                  <div class="progress">
                    <div class="rounded bg-info progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
                  </div>
                </div>
                <div class="pg">
                  <span>Bootstrap</span>
                  <div class="progress">
                    <div class="rounded bg-warning progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 我的经历模态框 -->
  <div class="modal fade" id="experience">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h2 class="modal-title text-white">我的经历</h2>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body modal-spa">
          <div class="container">
            <div class="row">
              <div class="col-md-6 text-white myexperience">
                <h3 class="bg-danger">校园经历</h3>
                <div>&#x3000&#x3000大学时期加入过校合唱团担任干事，积极完成学校交给的各项任务，参与活动的策划，提高自身能力，反馈活动心得，总结经验，加入武术协会担任会员，强身健体。课余时间考取高级Web开发工程师、JavaScript编程证书、计算机二级、C1驾驶证、信息处理技术员等证书。荣获学校励志奖学金，优秀干事，优秀演员，优秀工作者等称号。</div>
              </div>
              <div class="col-md-6 text-white myexperience">
                <h3 class="bg-info">项目经历</h3>
                <div>
                    &#x3000&#x3000出于对前端的热爱学校课余时间做过鹏鹏汽车、水果商城微信小程序、森林资源管理信息系统等项目，运用了HTML、CSS、后台node、数据库Mysql、JavaScript、DOM、BOM、闭包等技术。考虑用户体验的前提下，实现网页的多功能交互。项目包含两部分：前台用户功能和后台管理功能。前台管理功能主要包括网址首页，详情，咨询中心等；后台管理主要包含注册模块和登录模块。使用HTML和CSS实现网页的布局与样式的制定，然后使用JS实现用户的交互，利用AJAX请求，MySQL操作数据库实现网页的动态响应。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 我的作品模态框 -->
  <div class="modal fade" id="works">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h2 class="modal-title text-white">我的作品</h2>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body modal-spa">
            <div class="row z-poke" id="poke">
              <!-- 列 col-4 -->
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">鹏鹏汽车</span>
                    <span class="z-fh p-2 bg-light">001</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/1.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">鹏鹏汽车</span>
                    <span class="z-fh p-2 bg-light">002</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/2.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">鹏鹏汽车</span>
                    <span class="z-fh p-2 bg-light">003</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/3.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">学子问答</span>
                    <span class="z-fh p-2 bg-light">004</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/4.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">学子问答</span>
                    <span class="z-fh p-2 bg-light">005</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/5.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">学子问答</span>
                    <span class="z-fh p-2 bg-light">006</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/6.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">微信小程序</span>
                    <span class="z-fh p-2 bg-light">007</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/4.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">微信小程序</span>
                    <span class="z-fh p-2 bg-light">008</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/5.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12 pt-3 pb-3">
                <div class="wrap bg-dark p-3">
                  <div class="d-flex justify-content-between text-dark">
                    <span class="p-2 bg-light">微信小程序</span>
                    <span class="z-fh p-2 bg-light">009</span>
                  </div>
                  <div class="w-100 bg-light rounded mt-3 p-2">
                    <a href="#"><img src="./img/6.PNG" alt="" class="w-100"></a>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 联系我模态框 -->
  <div class="modal fade" id="contact">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h2 class="modal-title text-white">联系我</h2>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body modal-spa">
          <div class="container">
            <div class="row">
              <div class="col-12">
                <form class="form-item">
                  <div class="form-group">
                    <label for="exampleInputEmail1">姓名：</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Name">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputEmail1">邮箱：</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputEmail1">主题：</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="The theme">
                  </div>
                  <div class="form-group">
                    <label for="exampleFormControlTextarea1">信息：</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary">提交</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>